<template>
	<view class="dymanic">
		<view class="u-page">
			<u-navbar id="header" :is-back="false" :background="{background: '#000'}" :border-bottom="false">
				<view class="slot-wrap">
					<view class="">
						<u-tabs-swiper :style="{background: '#000'}" active-color="#A87B38" inactive-color="#ccc"
							ref="uTabs" :list="swipertypelist" :current="swipertypeCurrent" 
							@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
					</view>
					<u-icon class="selection" @click="selectshow = true" name="bell-fill" color="#D6A666" size="35"></u-icon>
				</view>
			</u-navbar>
			<swiper :current="swipertypeCurrent" @transition="transitions" @animationfinish="animationfinishs" :style="{height: 'calc(100vh - '+ (fixswiper.footer+fixswiper.header) +'px)'}">
				<swiper-item class="swiper-item" v-for="(itemccc, indexccc) in swipertypelist" :key="indexccc">
					<scroll-view scroll-y style="height: 100%;width: 100%;" lower-threshold="100" 
						refresher-background="#000" @refresherrefresh="refresherrefresh" refresher-enabled 
						:refresher-triggered="refresher[indexccc]" refresher-default-style="white" @scrolltolower="onreachBottom">
						<view class="swiperwrap">
							<u-swiper class="uswiper" mode="dot" name="img" :list="swiperlist"></u-swiper>
						</view>
						<!-- <u-grid class="u-grid" :col="4" :border="false">
							<u-grid-item v-for="(item,index) in cate" :key="item.name" @click="catedymanic(item.name,item.id)">
								<image :src="HOSTURL + item.image"></image>
								<view class="grid-text">{{item.name}}</view>
							</u-grid-item>
						</u-grid> -->
						<view class="list">
							<dy-item v-for="(item,index) in dymaniclist[indexccc]" :key="index" @zan="zan(index)" @dyopsshow="dyopsshow(index)" :item="item"></dy-item>
						</view>
						<u-loadmore bg-color="#000" :style="{padding: '20rpx 0'}" :status="status" />
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<image @click="nav('pubdymanic')" src="../../static/index/fabu.png" class="pubbtn" mode="widthFix"></image>
		<u-popup v-model="show" mode="center" width="85%" :closeable="true"
			close-icon-color="#B2B2B2" close-icon-size='40'>
			<view style="background: #2C2C2C;color: #fff;height: 100%;width: 100%;">
				<view style="height: 130rpx;"></view>
				<view style="text-align: center;margin-top: 30rpx;font-size: 30rpx;">完成真人认真或者会员才可以发布动态</view>
				<view style="height: 40rpx;"></view>
				<view class="bottomOne" @click="nav('renzheng')">立即认证</view>
				
				<view class="bottomTwo" v-if="platform==''" @click="nav('member')">开通会员</view>
				<view style="height: 50rpx;"></view>
			</view>
		</u-popup>
		<!-- <image @click="nav('pubdymanic')" src="../../static/pubdy.png" class="pubbtn" mode="widthFix"></image> -->
		<u-toast ref="uToast" />
		<u-action-sheet :list="selectlist" @click="selectclick" v-model="selectshow"></u-action-sheet>
		<u-action-sheet :list="dyops" @click="dyopclick" v-model="dyopshow"></u-action-sheet>
		<!-- <u-tabbar id="footer" :border-top="false" bg-color="#1B1A1F" active-color="#A87B38" inactive-color="#CCC" v-model="current" :list="list" :mid-button="false"></u-tabbar> -->
	</view>
</template>

<script>
	import dyItem from '@/components/dy-item.vue'
	export default {
		components:{
			dyItem
		},
		data() {
			return {
				show: false,
				refresher: [false, false],
				dyopshow: false,
				swipertypeCurrent: 0,
				swipertypelist: [{
					name: '全部'
				}, {
					name: '附近'
				}],
				HOSTURL:this.$HOSTURL,
				status: 'loadmore',
				selectshow: false,
				selectindex: 0,
				showaddpopup: false,
				selectsex: '查看全部',
				selectlist: [{
							text: '查看全部'
						}, {
							text: '只看女士'
						}, {
							text: '只看男士'
						}],
				dyops: [{
					text: '举报'
				}],
				swiperlist: [],
				cate: [],
				dymaniclist: [[],[]],
				data: {
					userid: this.$store.state.userid,
					count: 10,
					longitude: this.$store.state.longitude,
					latitude: this.$store.state.latitude,
					sex: 0,
					new: 0,
					recently: 0,
					pagecount: 10,
					pagesize: 10
				},
				page: [0,0],
				dyopidx: -1,
				fixswiper: {
					header: 10,
					footer: 50
				},
				platform:''
			}
		},
		onLoad() {
			this.data.sex =  this.$store.state.sex == '男' ? 1 : 2
			this.selectsex = this.selectlist[this.data.sex].text
			this.getlunbo()
			this.getcate()
			this.getDymanic()
			// #ifndef H5
			const query = uni.createSelectorQuery().in(this);
			query.select('#footer').boundingClientRect(data => {
				this.fixswiper.footer = data.height
			}).exec();
			query.select('#header').boundingClientRect(data => {
				this.fixswiper.header = data.height
			}).exec();
			// #endif
			
			uni.getSystemInfo({
				success:(res) => {
					console.log(res)
					this.platform = res.platform  // 14.3
				}
			})
		},
		onReachBottom(){
			this.onreachBottom()
		},
		onPullDownRefresh () {
			this.refresherrefresh()
			setTimeout(() => {
				//结束下拉刷新
			  uni.stopPullDownRefresh ();
			}, 1000);
		},
		// #ifdef MP
		onShareAppMessage() {
			const url = '/pages/index/index?share_id='+this.$store.state.userid
		    return {
		        title: this.$store.state.userinfo.name + "邀您来这里一起真实相约吧！",
		        path: url,
		        params: {},
				success(res){
				    uni.showToast({
				         title:'分享成功',
				        })
						console.log(url)
				    },
					
				fail(res){
				     uni.showToast({
				        title:'分享失败',
				        icon:'none'
						})
				}
				
		    };
		},
		// #endif
		onShow() {
			/*if (!this.$store.state.hasLogin) {
				uni.redirectTo({
					url: '/pages/appview/index'
				})
			}
			*/
		},
		methods: {
			dyopsshow(idx) {
				this.dyopidx = idx
				if(this.dymaniclist[this.swipertypeCurrent][idx].id == this.$store.state.userid){
					this.dyops = [{text: '删除'}]
				}else{
					this.dyops = [{text: '举报'}]
				}
				this.dyopshow = true
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swipertypeCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transitions(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinishs(e) {
				let swipertypeCurrent = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(swipertypeCurrent);
				this.swipertypeCurrent = swipertypeCurrent;
				this.swipertypeCurrent = swipertypeCurrent;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.status == 'nomore') return false
				this.status = 'loading'
				this.page[this.swipertypeCurrent]++
				this.getDymanic()
			},
			async zan(index) {
				const {
					data: res
				} = await this.$Request({
					url: 'apis/home/Dymanic/thumbsup',
					data: {
						type: this.dymaniclist[this.swipertypeCurrent][index].isthumbsup == 1 ? 2 : 1,
						dy_id: this.dymaniclist[this.swipertypeCurrent][index].dy_id,
						userid: this.$store.state.userid
					}
				})
				if (res.code == 200) {
					if(this.dymaniclist[this.swipertypeCurrent][index].isthumbsup == 1){
						this.dymaniclist[this.swipertypeCurrent][index].isthumbsup = 0
						this.dymaniclist[this.swipertypeCurrent][index].num--
					}else{
						this.dymaniclist[this.swipertypeCurrent][index].isthumbsup = 1
						this.dymaniclist[this.swipertypeCurrent][index].num++
						this.$pushMsg(this.dymaniclist[this.swipertypeCurrent][index].id);
					}
				}
			},
			
			selectclick(index) {
				this.selectsex = this.selectlist[index].text
				if (this.selectlist[index].text == '不限性别') {
					this.data.sex = 0
				} else if (this.selectlist[index].text == '只看女士') {
					this.data.sex = 1
				} else {
					this.data.sex = 2
				}

				this.status = 'loadmore'
				this.page = [0,0]
				this.dymaniclist = [[],[]]
				this.getDymanic()

			},
			async dyopclick(index){
				if(this.dymaniclist[this.swipertypeCurrent][this.dyopidx].id == this.$store.state.userid){
					const {data:res} = await this.$Request({
						url: 'api/Member/delDymanic',
						data: {
							id: this.dymaniclist[this.swipertypeCurrent][this.dyopidx].dy_id
						}
					})
					this.$u.toast(res.msg);
					if (res && res.code == 200) {
						this.dymaniclist[this.swipertypeCurrent].splice(this.dyopidx, 1);
						this.dyopidx = -1
					}
				}else{
					this.nav('jubao','uid',this.dymaniclist[this.swipertypeCurrent][this.dyopidx].id)
				}
			},
			
			nav(url, params, value) {
				if(url == 'pubdymanic'){
					if(this.$store.state.userinfo.is_identity_authentication != 2){
						this.show = true
						return
					}
				}
				if(url=='renzheng'){
					// #ifdef MP-WEIXIN
						return this.$u.toast('请下载开心小圈APP进行认证')
					// #endif
				}
				this.show = false
				uni.navigateTo({
					url: `/pages/${url}/index${params?'?'+params+'='+value:''}`
				})
			},
			catedymanic(name, id) {
				uni.navigateTo({
					url: '/pages/catedymanic/index?text=' + name + '&id=' + id
				})
			},
			async getlunbo() {
				const {
					data: res
				} = await this.$Request({
					url: 'apis/home/user/lunbo'
				})
				res.result.forEach(item => {
					return item.img = this.HOSTURL + item.img
				})
				this.swiperlist = res.result
				console.log("轮播图") 
				console.log( res.result)
			},
			
			async getcate() {
				const {
					data: res
				} = await this.$Request({
					url: 'apis/home/dymanic/category'
				})
				this.cate = res.result
			},
			async getDymanic(cb) {
				this.data.nearby = this.swipertypeCurrent
				this.data.page = this.page[this.swipertypeCurrent]
				const {
					data: res
				} = await this.$Request({
					url: 'apis/home/Dymanic/dymaniclst',
					data: this.data
				})
				if (!res) return false
				if (res.result.length < 10) {
					this.status = 'nomore';
				}
				this.$set(this.dymaniclist,this.swipertypeCurrent,this.dymaniclist[this.swipertypeCurrent].concat(res.result))
				typeof cb == 'function' && cb()
			},
			refresherrefresh(){
				this.$set(this.refresher,this.swipertypeCurrent,true)
				this.status = 'loadmore';
				this.page[this.swipertypeCurrent] = 0
				this.dymaniclist[this.swipertypeCurrent] = []
				this.getDymanic(()=>{
					this.$set(this.refresher,this.swipertypeCurrent,false)
					console.log(111)
				})
			}
		},
		computed: {
			list() {
				return this.$store.state.tabbarlist
			},
			current() {
				return this.$store.state.tabbarcurrent
			}
		},
		watch: {
			swipertypeCurrent(){
				if(this.dymaniclist[this.swipertypeCurrent].length == 0){
					this.getDymanic()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.dymanic {
		min-height: 100vh;
		background: #000;
		position: relative;
		/deep/.u-grid-item {
			background-color: #000!important;
		}
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		flex: 1;
		padding: 0 30rpx;
		.selection{
			position: absolute;
			right: 30rpx;
		}
	}
	.swiperwrap {
		padding: 20rpx;
		/deep/uni-swiper{
			background-color: #302f39!important;
		}
		/deep/swiper{
			background-color: #302f39!important;
		}
	}

	.u-grid {
		image {
			width: 15vw;
			height: 15vw;
		}
	}
	/deep/.u-tabs{
		background-color: #000 !important;
	}
	.pubbtn {
		width: 120rpx;
		position: fixed;
		bottom: 20vw;
		bottom: calc(20vw + constant(safe-area-inset-bottom));
		bottom: calc(20vw + env(safe-area-inset-bottom));
		right: 7vw;
		z-index: 1;
	}


	.grid-text {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: $u-type-info;
	}

	.list {
		padding: 30rpx 0;

		.selects {
			padding: 20rpx 0;
			background-color: #fff;
			display: flex;
			justify-content: space-around;

			.select {
				width: 33vw;
				text-align: center;
			}
		}

	}
	.bottomOne{
		margin: 40rpx auto;
		width: 443rpx;
		height: 84rpx;
		background-color: #D6A666;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 35rpx;
	}
	.bottomTwo{
		margin: 40rpx auto;
		width: 443rpx;
		height: 84rpx;
		border: 1rpx solid #D6A666;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #D6A666;
		font-size: 35rpx;
	}
</style>
